<template>
  <div class="index">
    <h2>雾锁深情目-Echarts</h2>
    <p v-if="timer">当前时间：{{ timer }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const timer = ref("");

/**
 * 补零
 */
const add0 = (num: any) => {
  return num < 10 ? "0" + num : num;
};
/**
 * 获取当前时间
 */
const getTimer = () => {
  let id = new Date();
  let Y = id.getFullYear();
  let M = add0(id.getMonth() + 1);
  let D = add0(id.getDate());
  let h = add0(id.getHours());
  let m = add0(id.getMinutes());
  let s = add0(id.getSeconds());
  return (timer.value = Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s);
};

onMounted(() => {
  /**
   * 采用计时器获取最新时间
   */
  setInterval(() => {
    getTimer();
  }, 1000);
});
</script>

<style lang="scss" scoped>
.index {
  background: url("@/assets/header.png");
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
  h2 {
    text-align: center;
    line-height: 45px;
  }
  p {
    font-family: electronicFont;
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    top: 8px;
    right: 12px;
    color: #ffeb7b;
  }
}
</style>
